<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base target="blank">
<title>游动的小鱼</title>
<style type="text/css">
div {
	margin: 10px auto;
	background-color: #aa0;
	height: 200px;
	width: 300px;
}

img {
	position: relative;
	left: 100px;
	top: 50px;
	width: 80px;
	height: 80px
}

li {
	line-height: 50px
}

* {
	vertical-align: middle;
}
</style>
</head>

<body>
	<h3>案例涉及知识点</h3>
	<ol>
		<li>键盘事件与鼠标事件
		<li>元素实际位置与大小
		<li>事件冒泡与默认行为
	</ol>
	<h3>基本功能</h3>
	<ol>
		<li>使用键盘控制鱼的游动
	</ol>
	<div id="pond" onmousemove="">
		<img id="fish" src="小丑鱼.jpg" />
	</div>
	<h3>扩展</h3>
	<ol>
		<li>让鱼跟随鼠标移动
		<li>
			水域：
			<input type="range" id="range">
			移动滑块让鱼在不同水域里面游泳(只调整背景的蓝色值)
		<li>
			换鱼：
			<input type="radio" name="type" value="小丑鱼.jpg" checked="checked">
			小丑鱼
			<input type="radio" name="type" value="比目鱼.jpg">
			比目鱼
			<input type="radio" name="type" value="石斑鱼.jpg">
			石斑鱼
		<li>让小鱼只能在鱼缸里面游动，不能游出来
	</ol>
	<h3>参考</h3>
	<ol>
		<li>
			<a href="https://www.jb51.net/article/94014.htm">js鼠标按键事件和键盘按键事件用法实例汇总</a>
		<li>
			<a href="https://blog.csdn.net/qq_35430000/article/details/80277587">搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop</a>
		<li>
			<a href="https://www.cnblogs.com/jsanntq/p/7681942.html">js事件冒泡、阻止事件冒泡以及阻止默认行为</a>
		<li>
			<a href="https://blog.csdn.net/javaloveiphone/article/details/50956201">js事件对象Event获取pageX,clientX,screenX,offsetX,layerX的方式与区别</a>
	</ol>

</body>
<!--
<script type="text/javascript" src="../00-答案/02-游动的小鱼.js"></script>
-->

<!--熊哥-->
<script type="text/javascript">
	var fish = document.getElementById("fish");
	var left = 100;
	var topp = 50;
	//键盘事件
	 document.onkeydown=function(e){
		var e=window.event;
		switch (e.keyCode) {
	 		case 65: //左 a
	 			fish.style.left = left-2 + "px" ;
	 			left = left -2;
		 		break;
	 		case 87: //上 w
	 			fish.style.top =  topp-2+ "px";
	 			topp = topp-2;
		 		break;
	 		case 68: //右 d
	 			fish.style.left = left+2 + "px";
	 			left = left+2;
		 		break;
	 		case 83: //下 s
	 			fish.style.top = topp+2+ "px";
	 			topp = topp+2;
		 		break;
		 		
		 	// 如果使用键盘的上下左右控制小鱼，会导致浏览器的滚动条一起滚动
		 	// 解决的方法是： 禁止键盘事件的默认行为
		 	return false;
		}
	}
	 var x;
	 var y;
	//小鱼跟鼠标动
	document.onmousedown=function(event){
		var event = window.event;
		//鼠标的x和y坐标
		x = event.screenX;
		y = event.screenY;
		fish.style.position = "absolute";
		fish.style.left = x + "px";
		fish.style.top = y + "px";
	}
	
	
	//小鱼跟鼠标动
	document.onmousemove=function(event){
		var event = window.event;
		fish.style.position = "absolute";
		fish.style.left = event.clientX + "px";
		fish.style.top = event.clientY + "px";
	}
	
	
	//换小鱼
	 var radios = document.getElementsByName("type");
		for( let radio of radios ){
			// onchange 用于监听 value 的变化， 单选框、多选框选中变化用 onclick
			radio.onclick = function(){
				// 获取事件对象 event 对象，可以只用从 window 获取
				// window.event ==》 当前事件对象   ==> event
				let r = event.srcElement; // 当前事件的目标元素对象 
				console.info(r.value);
				fish.src = r.value;
			}
		}
	
	
		
</script>

</html>
